<template>
  <div>
    <div class="cardlist" v-show="space">
      <div v-for="(item,index) in couponList" :key="index">
        <div class="card">
          <div class="image">
            <img
              src="../../assets/coup.png"
              alt="图片未显示"
              style="width: 60px; height: 60px; border-radius: 30px"
            />
          </div>
          <div class="left">
            <span style="font-size: 14px; font-weight: 600">{{item.title ? item.title : "默认标题"}}</span>
            <span style="font-size: 12px">{{item.expire_at ? item.expire_at : "默认日期"}}</span>
          </div>
          <div class="right">
            <van-button v-if="item.is_use == 5" @click="todetail(item)"  type="default">未领取</van-button> 
            <van-button v-if="item.is_use == 0" @click="scan(item)"  type="default">核销码</van-button>
            <van-button v-if="item.is_use == 1" type="default">已使用</van-button>
          </div>
        </div>
      </div>


      <div class="box-img" v-show="picShow">
        <img :src="src" alt="" />
      </div>

      <van-dialog v-model="show" show-cancel-button @confirm="confirmCode">
        <div class="card_small">
          <div class="image_small">
            <img  
              src="../../assets/coup.png"
              alt="图片未显示"
              style="width: 30px; height: 30px; border-radius: 15px"
            />
          </div>
          <div class="left">
            <span style="font-size: 12px; font-weight: 600">{{couponDet.title ? couponDet.title : "默认标题"
            }}</span>
            <span style="font-size: 10px">{{
              couponDet.expire_at ? couponDet.expire_at : "默认日期"
            }}</span>
          </div>
          <div class="right">
            
            <van-button v-if="couponDet.is_use == 5 " size="small" type="default">未领取</van-button>
            <van-button v-if="couponDet.is_use == 0" size="small" type="default">未使用</van-button>
            <van-button v-if="couponDet.is_use == 1" size="small" type="default">已使用</van-button>
            
          </div>
    
        </div>
        <div class="card_detail" v-html="details"></div>
        <!-- <img src="../../assets/code_icon.png" alt="" /> -->
        <!-- <qrcode-vue :value="qr_url" :size="size" level="H" /> -->
        
        <div v-if="couponDet.is_use == 5">是否立即领取</div>
      </van-dialog>


      <div id="qrcode" ref="qrcode" class="box_code"></div>
    </div>
    <div class="space" v-show="!space">
      <img
        src="../../assets/space.png"
        mode=""
        style="width: 300px; height: 300px; border-radius: 30px"
      />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Button, Dialog, Toast } from "vant";
import { cardList, cardDetail, checkCard } from "../../api/index";
import QRCode from "qrcodejs2";
// import QrcodeVue from "qrcode.vue";
Vue.use(Dialog);
Vue.use(Toast);

export default {
  components: {
    vanButton: Button,
  },
  data() {
    return {
      show: false,
      get_card_id: "",
      title: "",
      expire_at: "",
      is_use: "",
      details: "",
      qr_url: "",
      code: "",
      src: "",
      picShow: true,
      space: true,
      couponList:[],
      couponDet:{},
    };
  },
  computed: {
    cardStatius() {
      return this.is_use == 0
        ? "未使用"
        : "" || this.is_use == 1
        ? "已使用"
        : "" || this.is_use == 5
        ? "未领取"
        : "";
    },
  },
  methods: {
    todetail(e) {
      this.show = true;
      this.couponDet = e

    },
    confirmCode() {
      this.$refs.qrcode.innerHTML = ''
      this.picShow = false;
      console.log(111)
       let params1 = {
        get_card_id: this.couponDet.id,
        user_id: this.$route.params.user_id,
        activity_id: this.$route.params.activity_id
      };
      cardDetail(params1).then(res=>{
        console.log(res)
        let url = res.data.data.qr_url
        this.$nextTick(() => {
          new QRCode(this.$refs.qrcode, {
            width: 150, // 设置宽度，单位像素
            height: 150, // 设置高度，单位像素
            text: url, // 设置二维码内容或跳转地址
            correctLevel: QRCode.CorrectLevel.L,
            // `${that.qr_url}`
          });
        });


      })
    },
    scan(item){
      this.picShow = false;
      this.$refs.qrcode.innerHTML = ''
      let params1 = {
        get_card_id: item.id,
        user_id: this.$route.params.user_id,
        activity_id: this.$route.params.activity_id
      };
      cardDetail(params1).then(res=>{
        console.log(res)
        let url = res.data.data.qr_url
        this.$nextTick(() => {
          new QRCode(this.$refs.qrcode, {
            width: 150, // 设置宽度，单位像素
            height: 150, // 设置高度，单位像素
            text: url, // 设置二维码内容或跳转地址
            correctLevel: QRCode.CorrectLevel.L,
            // `${that.qr_url}`
          });
        });

      })
    },
    // info() {
    //   let that = this;
    //   let params1 = {
    //     get_card_id: this.$route.params.get_card_id,
    //     user_id: this.$route.params.user_id,
    //   };
    //   cardDetail(params1).then((res) => {
    //     console.log(res);
    //     that.qr_url = res.data.data.qr_url;
    //     // localStorage.setItem("qr_url", that.qr_url);
    //     that.title = res.data.data.title;
    //     that.src = res.data.data.images;
    //     that.expire_at = res.data.data.expire_at.split(" ")[0];
    //     that.details = res.data.data.details;
    //     that.is_use = res.data.data.is_use;
    //     const url = that.qr_url;
    //     this.$nextTick(() => {
    //       new QRCode(this.$refs.qrcode, {
    //         width: 150, // 设置宽度，单位像素
    //         height: 150, // 设置高度，单位像素
    //         text: url, // 设置二维码内容或跳转地址
    //         correctLevel: QRCode.CorrectLevel.L,
    //         // `${that.qr_url}`
    //       });
    //     });
    //   });
    // },
    tocheckCard() {
      // let that = this;
      let params = {
        activity_id: this.$route.params.activity_id,
        user_id: this.$route.params.user_id,
      };
      checkCard(params).then((res) => {
        // console.log(res,1111111111111);
        // alert('have')
          // if(res.data.data != ''){
            console.log(res);
            this.couponList = res.data.data
            this.src = res.data.card_img
            // that.qr_url = res.data.data.qr_url;
            // // localStorage.setItem("qr_url", that.qr_url);
            // that.title = res.data.data.title;
            // that.src = res.data.data.images;
            // that.expire_at = res.data.data.expire_at.split(" ")[0];
            // that.details = res.data.data.details;
            // that.is_use = res.data.data.is_use;
            // const url = that.qr_url;
            // this.$nextTick(() => {
            //   new QRCode(this.$refs.qrcode, {
            //     width: 150, // 设置宽度，单位像素
            //     height: 150, // 设置高度，单位像素
            //     text: url, // 设置二维码内容或跳转地址
            //     correctLevel: QRCode.CorrectLevel.L,
            //   });
            // });
          // }else{
          //   this.space = false
          //   console.log('not');
          // }

        
      });
    },
  },
  mounted() {},
  created() {
    if (this.code == "" || this.code == null) {
      this.code = localStorage.getItem("code");
    }

    // let activity_id = localStorage.getItem("activity_id");
    // console.log(this.$route.params.get_card_id);

    console.log(this.$route.params.activity_id, this.$route.params.type,this.$route.params.user_id);
    // console.log(localStorage.getItem("user_id"));
    // console.log(activity_id);
    const toast = Toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: "倒计时 3 秒",
    });

    let that = this;
    let params = {
      activity_id: this.$route.params.get_card_id,
      user_id: this.$route.params.user_id,
    };

    cardList(params).then((res) => {
      console.log(res);
      that.code = res.data.code;
      this.tocheckCard();
      // if (res.data != "" || res.data != null) {
      //   if (this.$route.params.type == "checkCard") {
      //     this.tocheckCard();
      //   } else {
      //     this.info();
      //   }
      // } else {
      //   this.space = false;
      // }
    });

    toast.clear();
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-dialog__content {
  padding: 20px;
}
.cardlist {
  padding-top: 1.25rem;
  z-index: 100;
}
.space {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f7f7f7;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  display: flex;
  width: 90%;
  margin: 5% 5%;
  height: 5.3125rem;
  border-radius: 8px;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 100;
  padding: 0 5%;
  justify-content: space-between;
}
.card_small {
  display: flex;
  width: 90%;
  margin: 0 auto;
  height: 3.5rem;
  border-radius: 4px;
  align-items: center;
  box-sizing: border-box;
  border: 0.5px solid #ccc;
  padding: 0 5%;
  justify-content: space-between;
}
.box-img {
  position: absolute;
  top: 0;
  left: 0;
  img {
    width: 100vw;
    height: 100vh;
  }
}
.left {
  display: flex;
  text-align: left;
  flex-direction: column;
}
.card_detail {
  margin: 10px 0;
}
.box_code {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
.box_code > img {
  z-index: 100;
}
</style>
